<script setup>
import { ref, onMounted, defineProps, computed, watch } from 'vue'
import { createPostAPI } from '@/services/forum'
import { useUserStore } from '@/stores'
import { debounce } from '@/utils/debounce'
const userStore = useUserStore()
const params = ref({
  title: '',
  text: '',
  url: '',
  likeNumber: 0,
  userId: userStore.user.id,
  userName: userStore.user.userName,
  avatar: userStore.user.avatarUrl,
})
const uploadImg = () => {
  uni.chooseImage({
    success: (chooseImageRes) => {
      const tempFile = chooseImageRes.tempFilePaths[0]
      params.value.url = tempFile
    },
  })
}

const rules = {
  title: [
    {
      type: 'string',
      required: true,
      message: '请填写标题',
      trigger: ['blur', 'change'],
    },
    {
      min: 2,
      max: 30,
      message: '长度在2-30个字符之间',
    },
  ],
  text: {
    type: 'string',
    required: true,
    message: '请输入帖子正文',
  },
  url: {
    required: true,
    message: '请上传帖子封面图',
  },
}

const formRef = ref()
const add = () => {
  formRef.value
    .validate()
    .then(async (res) => {
      uni.showLoading({
        title: '发布中',
        mask: true,
      })
      await createPostAPI(params.value)
      const pages = getCurrentPages()
      const prevPage = pages[pages.length - 2] // 获取上一个页面实例对象
      uni.navigateBack({
        delta: 1,
        success: function () {
          prevPage.onLoad() // 执行上一页的onLoad函数
        },
      })
    })
    .catch((errors) => {
      uni.showToast({
        icon: 'error',
        title: '校验失败',
      })
    })
}
const debounce_Add = debounce(add, 500)
</script>
<template>
  <view>
    <view
      style="
        padding: 40rpx;
        border-radius: 20rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      "
    >
      <uv-form labelPosition="top" :model="params" :rules="rules" ref="formRef">
        <uv-form-item label="标题" prop="title" borderBottom>
          <uv-input v-model="params.title" border="none" placeholder="请输入帖子标题"></uv-input>
        </uv-form-item>
        <!-- 正文部分 -->
        <uv-form-item prop="text">
          <uv-textarea
            v-model="params.text"
            count
            placeholder="请输入帖子正文"
            maxlength="1000"
            autoHeight
          ></uv-textarea>
        </uv-form-item>
        <uv-form-item prop="url" borderBottom>
          <!-- 上传封面图 -->
          <view style="margin: 0 auto">
            <button
              @tap="uploadImg"
              style="
                font-size: 28rpx;
                margin-bottom: 20rpx;
                text-align: center;
                background-color: #1a966c;
                border-radius: 20px;
                color: #fff;
              "
            >
              上传帖子封面图
            </button>
            <image :src="params.url" mode="aspectFit"></image>
          </view>
        </uv-form-item>
        <!-- 按钮 -->
        <view style="width: 70%; margin: 0 auto">
          <uv-button
            type="success"
            text="发布"
            shape="circle"
            customStyle="margin-top: 10px"
            @click="debounce_Add()"
          ></uv-button>
        </view>
      </uv-form>
    </view>
  </view>
</template>

<style scoped></style>
